<template>
  <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="box">
      <BorderTitle><i>热门歌手Top30</i></BorderTitle>
      <ul class="ul">
        <li v-for="s in artistsList" :key="s.id">
          <ArtistsList :item="s"></ArtistsList>
        </li>
      </ul>
    </div>
  </van-pull-refresh>
</template>

<script>
import BorderTitle from "@/components/BorderTitle";
import ArtistsList from "@/components/ArtistsList";
import { Toast } from "vant";
export default {
  data() {
    return {
      artistsList: null,
      isLoading: false,
    };
  },
  components: {
    BorderTitle,
    ArtistsList,
  },
  created() {
    this.$axios.get("/top/artists?offset=0&limit=30").then((data) => {
      this.artistsList = data.data.artists;
    });
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  li {
    width: 33%;
  }
}
</style>